<template>
<div>
  <div class="tit"><span>家博</span>SAAS</div>
  <el-aside width="200px" style="background-color: rgb(47, 62, 76);padding-top: 60px">
    <el-menu :default-active="act" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#2f3e4c" text-color="#bfcbd9"  active-text-color="#3399ff">
      <el-submenu :index="item.id+''" v-for="item in sidebar" @click="toRoouter">
        <template slot="title">
          <i :class="item.icon" style="color:#fff"></i>
          <span>{{item.name}}</span>
        </template>
          <el-menu-item :index="ite.id+''" v-for="ite in item.menu " @click="toRoouter(ite)" style="background:#fffff">{{ite.name}}</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</div>
  
</template>
<script>
import {session} from '../../assets/session.js'
export default {
  data() {
    return {
      sidebar: [],
      act:'1',
    };
  },
  created(){
    this.act=session('get','leftActive')
    let user=JSON.parse(session('get','user'))
    this.menuArr(user.menuList)
    this.$root.$on("tabNav",data=>{
      this.act=session('get','leftActive')
      console.log(this.act)
    })
  },
  methods: {
    toRoouter(item) {
      let leftNav = "/index";
      console.log(item)
      if(item.parentId!=0){
        leftNav = item.url; 
      }
      // console.log(ite)
      // if (ind == "1") {
      //   leftNav = "/index";
      // }else if (ind == "1-1") {  //服务订单
      //   leftNav = "/serverOrder"; 
      // }else if (ind == "1-2") {  //订单统一分配
      //   leftNav = "/orderAllocation"; 
      // }else if (ind == "1-3") {  //管家排期
      //   leftNav = "/butlerScheduling"; 
      // }else if (ind == "1-4") {  //订单统计
      //   leftNav = "/orderCount"; 
      // }else if (ind == "2-1") {  //报告列表
      //   leftNav = "/reportList"; 
      // }else if (ind == "2-2") {  //报告数据
      //   leftNav = "/reportData"; 
      // }else if (ind == "3-1") {  //运营
      //   leftNav = "/operate"; 
      // }else if (ind == "4-1") {  //财务
      //   leftNav = "/finance"; 
      // }else if (ind == "5-1") {  //人事
      //   leftNav = "/personnel";
      // }else if (ind == "5-2") {  //城市区域
      //   leftNav = "/cityArea"; 
      // }else if (ind == "5-3") {  //职位管理
      //   leftNav = "/jobManagement"; 
      // }else if (ind == "6-1") {  //城市划区
      //   leftNav = "/urbanArea";
      // }else if (ind == "6-2") {  //楼盘库
      //   leftNav = "/propertyBank";
      // }else if (ind == "6-3") {  //报告模板
      //   leftNav = "/reportTemplate"; 
      // }else if (ind == "6-4") {  //设置服务时间
      //   leftNav = "/setServerTime"; 
      // }else if (ind == "6-5") {  //系统参数
      //   leftNav = "/systemParameter";
      // }
      
      // 组合新的topNav
      let obj = {
        name: item.id+'',
        path: leftNav, 
        title: item.name
      };
      let tabs = JSON.parse(session('get','topNav'))
      let isAdd = true;
      // 寻找新的 topNav是不是有重复
      for (let i = 0, len = tabs.length; i < len; i++) {
        if (tabs[i].name == obj.name && tabs[i].title == obj.title) {
          isAdd = false;
        }
      }
      if (isAdd) {
        //判断新增的  topNav是否是重复的
        if (tabs.length >= 7) {
          tabs.shift();
        }
        tabs.push(obj);
        tabs=JSON.stringify(tabs)
        session('set','topNav',tabs)
      }
      session('set','leftActive',obj.name)
      this.$router.push({ path: leftNav });
      this.$root.$emit("toRoouter",'no')
    },
    menuArr(arr){
      // console.log(arr)
      let menu=[]
      arr.sort((a,b)=>a.id-b.id)  //数组根据id排序
      for(let i in arr){ //取出大类
        arr[i].menu=[];
        if(arr[i].parentId==0){
          menu.push(arr[i]);
        }
      }
      for(let i in arr){ //将每个子类插入到对应的  父类中去
        for(let j in menu){
            if(arr[i].parentId==menu[j].id){
              menu[j].menu.push(arr[i])
            }
        }
      }
      this.sidebar=menu
      // console.log(menu)
    },
    handleOpen(){

    },
    handleClose(){

    },
    topNav(){
    }
  }
};
</script>
<style>
.el-aside {
  color: #333;
  background: #2f3e4c;
}
.el-icon-message {
  color: #ffffff;
}
.el-submenu__title {
  color: #ffffff !important;
  padding-left: 0px !important;
}
.el-submenu__title:hover {
  background: #409eff;
  color: #ffffff;
}
.el-submenu__title:hover .el-submenu__title i {
  color: #ffffff;
}
.el-submenu{
  text-align: left;
}
.el-submenu__title{
  padding-left: 20px !important;
}
.el-menu{
  border-right: 0px !important;
}
</style>

<style scoped lang="less">
@import "./leftSidebar.less";
</style>


